<template>
  <div class="course-wrap">
    <van-pull-refresh v-model="state.loading"
                      @refresh="onRefresh"
                      success-text="刷新成功">
      <!-- 顶部导航栏-->
      <van-sticky>
        <div class="header">
          <span class="title">课程中心</span>
          <span class="search">
            <van-search v-model="value"
                        shape="round"
                        background="#87d4eb"
                        input-align="center"
                        placeholder="搜索"
                        @search="onSearch"></van-search>
          </span>
        </div>
        <van-tabbar class="typenav"
                    v-model="active"
                    active-color="#87d4eb"
                    @change="onTagChange">
          <van-tabbar-item v-for="item in data.typeNav"
                           :key="item">{{
            item.tag
          }}</van-tabbar-item>
        </van-tabbar>
      </van-sticky>

      <!--课程列表-->
      <div class="commonWrap courseItmeWrap course-list">
        <van-cell title="推荐课程">
          <template #icon>
            <van-icon name="good-job"
                      size="20px"
                      color="#87d4eb"></van-icon>
          </template>
        </van-cell>
        <course-item2 :data="data.courseList"></course-item2>
      </div>
    </van-pull-refresh>
    <van-tabbar class="my-tabbar"
                active-color="#87d4eb"
                route>
      <van-tabbar-item replace
                       to="/"
                       icon="search"></van-tabbar-item>
      <van-tabbar-item replace
                       to="/search"
                       icon="home-o "></van-tabbar-item>
      <van-tabbar-item replace
                       to="/user"
                       icon="user-o"></van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { reactive, getCurrentInstance, ref, watch } from 'vue'
import { Dialog } from 'vant'
import CourseItem2 from '@/components/Course/user/CourseItem2.vue'
export default {
  setup () {
    const active = ref(0)
    const { ctx, proxy } = getCurrentInstance()
    const state = reactive({
      count: 0,
      loading: false
    })

    const onRefresh = () => {
      setTimeout(() => {
        state.loading = false
        state.count++
      }, 1000)
    }
    const data = reactive({
      typeNav: [
        {
          tag: '全部'
        },
        {
          tag: '自然科学'
        },
        {
          tag: '社会科学'
        },
        {
          tag: '人文科学'
        },
        {
          tag: '生命科学'
        },
        {
          tag: '其他'
        }
      ],
      courseList: []
    })
    // 组件更新生命周期？
    // 按课程名模糊查询？
    const value = ref('')
    const onSearch = (val) => {
      // 测试搜索监听
      // console.log(val);
      // 测试模糊查询;
      proxy.$axios.course
        .getCourseByName({
          pageNo: 1,
          pageSize: 1000,
          str: val
        })
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data.data.records[0].courseTag)
            data.courseList = res.data.data.records
            for (const i in data.typeNav) {
              if (data.typeNav[i].tag === res.data.data.records[0].courseTag) {
                console.log(i)
                active.value = i
                console.log(active.value)
              }
            }
          }
        })
    }
    const change = (newValue) => {
      active.value = newValue
    }
    watch(active, (newValue, oldValue) => {
      // 直接监听
      change(newValue)
      // console.log("active:"+newValue);
    })
    // 获取被点击的课程标签？
    function onTagChange (val) {
      if (!window.sessionStorage.getItem('token')) {
        Dialog.alert({
          title: '提示',
          message: '请登录查看更多精彩课程'
        }).then(() => {
          // on close
        })
      } else {
        console.log(window.sessionStorage.getItem('token'))
        console.log(active.value)
        if (val === 0 && window.sessionStorage.getItem('token')) {
          proxy.$axios.course
            .getCourseByName({
              pageNo: 1,
              pageSize: 1000,
              str: ''
            })
            .then((res) => {
              if (res.status === 200) {
                console.log(res.data.data.records[0].courseTag)
                data.courseList = res.data.data.records
              }
            })
        } else {
          // console.log(val+1);
          // console.log(window.sessionStorage.getItem('token'));
          proxy.$axios.course
            .getCourseByTag({
              tags: data.typeNav[val].tag,
              pageNo: val + 1,
              pageSize: 100,
              token: window.sessionStorage.getItem('token')
            })
            .then((res) => {
              if (res.status === 200) {
                console.log(res)
                data.courseList = res.data.data.records
                console.log(data.courseList)
              } else {
                console.log('请求失败')
              }
            })
        }
      }
    }
    function mygetCourseList () {
      const that = this.data
      proxy.$axios.course
        .getAllCourse({
          pageNo: 1,
          pageSize: 1000
        })
        .then((res) => {
          if (res.status === 200) {
            console.log(res)
            that.courseList = res.data.data.records
            console.log(data.courseList)
          }
        })
    }
    return {
      change,
      active,
      data,
      state,
      value,
      onRefresh,
      onSearch,
      onTagChange,
      mygetCourseList
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
    CourseItem2
  },
  created () {
    // 获取推荐课程or所有课程？
    // 访问接口
    this.mygetCourseList()
  }
}
</script>
<style lang="scss">
.course-wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-between;
  .header {
    overflow: hidden;
    background-color: $theme-color1;
    color: #fff;
    padding-left: 10px;
    height: 50px;
    line-height: 50px;
    .title {
      float: left;
      font-size: 20px;
    }
    .search {
      opacity: 0.5;
      width: 150px;
      float: right;
      .van-cell {
        height: 30px;
      }
    }
  }
  .typenav {
    height: 30px;
    bottom: auto;
  }
}
.course-list {
  margin: 40px $margin-horizon;
  .van-cell {
    font-weight: 550;
    .van-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
